<template>
  <el-container>
    <el-header>
      <el-form :inline="true" style="margin-top: 20px">
        <el-form-item>
          <el-select v-model="currentAppId" placeholder="请选择应用">
            <el-option
              v-for="item in apps"
              :key="item.appId"
              :label="item.appName"
              :value="item.appId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="keyword" placeholder="关键字" clearable @clear="clearConditions">
            <el-button slot="append" type="primary" icon="el-icon-search" v-on:click="searchData"></el-button>
          </el-input>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table :data="dataTable.result" ref="listTable" style="width: 100%">
        <el-table-column label="ID" prop="id">
        </el-table-column>
        <el-table-column label="名称" prop="name">
        </el-table-column>
        <el-table-column label="描述" prop="description">
        </el-table-column>
        <el-table-column align="right">
          <template slot="header">
            <el-button type="text" icon="el-icon-plus" @click="add" title="新增" ></el-button>
            <el-button type="text" icon="el-icon-refresh" @click="query" title="刷新" ></el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)" title="编辑"></el-button>
            <el-button type="text" icon="el-icon-delete" @click="remove(scope.row)" title="删除"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-drawer :title="formTitle" :visible.sync="showEdit" @close="closeDialog" direction="rtl" size="40%">
        <template slot="title">
          <div>
            <el-button @click="showEdit = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </template>
        <el-container>
          <el-main>
            <el-form :model="editItem" label-width="100px">
              <el-form-item prop="id" label="ID">
                <el-input placeholder="请输入ID" v-model="editItem.id" :disabled="!createNew"></el-input>
              </el-form-item>
              <el-form-item prop="name" label="名称">
                <el-input placeholder="请输入名称" v-model="editItem.name"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input type="textarea" :rows="2" placeholder="请输入描述" v-model="editItem.description"></el-input>
              </el-form-item>

            </el-form>
            <el-table border ref="kvlist" min-height="200" :data="editItem.items" style="width: 100%;" >
              <el-table-column fixed="left" header-align="center" align="center" width="60">
                <template slot="header">
                  <el-button type="text" icon="el-icon-sort"></el-button>
                </template>
                <template slot-scope="scope">
                  <el-button type="text" :disabled="scope.$index <= 0" icon="el-icon-top" @click="editItem.items.moveUp(scope.$index)"></el-button>
                  <el-button type="text" :disabled="scope.$index >= (editItem.items.length -1)" icon="el-icon-bottom" @click="editItem.items.moveDown(scope.$index)"></el-button>
                </template>
              </el-table-column>
              <el-table-column label="字典值" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.value"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="文本" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.text"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="启用" width="80">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.enabled" @change="changeEnabled(scope.row)" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="描述">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.description"></el-input>
                </template>
              </el-table-column>
              <el-table-column header-align="center" align="center" width="40" fixed="right">
                <template slot="header">
                  <el-button type="text" icon="el-icon-circle-plus" @click="editItem.items.push({enabled:true})"></el-button>
                </template>
                <template slot-scope="scope">
                  <el-button type="text" icon="el-icon-remove" @click="editItem.items.remove(scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>

          </el-main>
        </el-container>
      </el-drawer>
    </el-main>
    <el-footer>
      <el-pagination v-on:current-change="query" :current-page.sync="queryObject.pageIndex"
        :page-size="queryObject.pageSize" layout="total, prev, pager, next" :total="dataTable.rowCount"></el-pagination>
    </el-footer>
  </el-container>

</template>

<script>
import {mapState, mapMutations, mapActions} from 'vuex';
const STORE_MODULE = {
  "name": "dict",
  "state": [
    "queryObject",
    "dataTable",
    "appId"
  ],
  "mutations": [
    "setParameters",
    "setAppId"
  ],
  "actions": [
    "query",
    "create",
    "update",
    "delete",
    "toggle"
  ]
};
export default {
  data() {
    return {
      apps: [],
      createNew: true, //是否编辑
      showEdit: false, //弹窗默认关闭
      editItem: {
        id: "",
        name: "",
        description: "",
        items: [
        ],
      },
      keyword: null
    };
  },
  computed: {
    ...mapState(STORE_MODULE.name, STORE_MODULE.state),
    formTitle(){
      return this.createNew ? "新建":"编辑";
    },
    currentAppId:{
      get(){
        return this.appId;
      },
      set(val){
        this.setAppId(val);
      }
    }
  },
  created(){
    this.$service.desktop.apps().then(r=>{
      if (r.success && r.data)
        this.apps = r.data;
    });
  },
  mounted() {
    this.query();
  },
  methods: {
    ...mapMutations(STORE_MODULE.name, STORE_MODULE.mutations),
    ...mapActions(STORE_MODULE.name, STORE_MODULE.actions),
    searchData(){
      this.queryObject.parameters.keyword = this.keyword;
      this.query();
    },
    closeDialog(){
    },
    resetForm(){
      for(var name in this.editItem)
        this.editItem[name] = null;
      this.editItem.items = [];
    },
    add(){
      this.resetForm();
      this.showEdit = true;
      this.createNew = true;
    },
    edit(row){
      this.resetForm();
      for(var name in this.editItem)
        this.editItem[name] = row[name];
      this.showEdit = true;
      this.createNew = false;
    },
    save() {
      let task = this.createNew ? this.create(this.editItem) : this.update(this.editItem);
      task.then((response) => {
        if (response.success){
          alert("保存成功","消息","success", ()=>{this.showEdit = false; this.createNew = true;});

        }
      });
    },
    clearConditions(){
      if (this.queryObject.parameters.keyword != this.keyword) this.searchData();
    },
    remove(row){
      confirm('确认要删除['+row.name+']吗？请谨慎操作！', '警告', 'warning', ()=>{

        this.delete([row.id]).then((response) => {
          if (!response.success) {
            let msg = response.message || "操作失败";
            alert(msg,"消息","error");
          }
        });
      });
    },
    /* switch */
    changeEnabled(item) {
      this.toggle({ group: this.editItem.id, val: item.value })
      .then(r => {

      });
    }
  }
};
</script>
